<template>
    <div v-if="lazy" class="h-full">
        <el-scrollbar class="flex-1 min-h-0 scrollbar__view" >
            <div class="pb-[20px] flex flex-wrap" v-if="pager.count > 0">
                <template
                    v-for="(item, index) in pager.lists"
                >
                    <slot
                        name="item"
                        :item="item"
                        :index="index"
                    />
                </template>
            </div>
            <!--  空状态  -->
            <div v-else class="flex justify-center items-center h-full">
                <el-result>
                    <template #icon>
                        <el-image class="w-[200px]" :src="DrawingEmpty" />
                    </template>
                    <template #title>
                        <div class="text-xl">
                            当前任务是空的哦
                        </div>
                    </template>
                    <template #sub-title>
                        <div class="text-info">
                            在左侧输入描述，创建你的作品吧!
                        </div>
                    </template>
                </el-result>
            </div>
        </el-scrollbar>
        <div
            v-if="pager.count > 0"
            class="flex justify-end items-center pt-[15px] mr-[30px]"
        >
            <pagination v-model="pager" @change="getListsFunc" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { qrcodeRecord } from '~/api/qrcode'
import { usePaging } from '~/composables/usePaging'
import DrawingEmpty from '~/assets/images/drawing/drawing_empty.png'

const emit = defineEmits<{
    (event: 'pagination', value: any): void
}>()
const props = withDefaults(
    defineProps<{
        status?: any
        lazy: boolean
    }>(),
    {
        status: '',
        lazy: false
    }
)

const { pager, getLists } = usePaging({
    fetchFun: qrcodeRecord,
    params: props
})

const getListsFunc = () => {
    emit('pagination', getLists)
}

watch(
    () => props.lazy,
    async (val) => {
        if (val) {
            getListsFunc()
        }
    },
    { immediate: true }
)
</script>

<style lang="scss" scoped>
.scrollbar__view {
   :deep(.el-scrollbar__view) {
       height: 100%;
   }
}
</style>